<template>
  <el-header class="header">
    <div class="logo">
      <img class="log-img" src="../../../static/img/logo1.png"/>
      <span class="system">官网后台管理系统</span>
    </div>
    <div class="user-info">
      <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                  <img class="user-logo" src="../../../static/img/img.jpg"/>
                  <p class="user-name">{{user.username}}</p>
                </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="updatePwd"><span>修改密码</span></el-dropdown-item>
          <el-dropdown-item command="loginout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      :before-close="dialogClose"
      width="30%"
      center>
      <el-form :model="user" :rules="rules" ref="user" label-width="100px" status-icon class="demo-ruleForm">
        <el-form-item label="用户名" prop="username">
          <el-input prefix-icon="el-icon-star-off" :disabled="true" v-model="user.username"
                    placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="原密码" prop="oldPassword">
          <el-input type="password" prefixIcon="el-icon-date" placeholder="原密码" v-model="user.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" prefixIcon="el-icon-date" placeholder="新密码" v-model="user.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPasswordConfirm">
          <el-input type="password" prefixIcon="el-icon-date" placeholder="确认新密码"
                    v-model="user.newPasswordConfirm"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="submitForm('user')">确 定</el-button>
      </div>
    </el-dialog>

  </el-header>
</template>
<script>
  import common from '../../common/constant.js'
  export default {
    data() {
      var checkNewPassword = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码！'));
        } else {
          if (value !== this.user.newPassword) {
            callback(new Error('新密码与确认密码不一致！'));
          }
          callback();
        }
      };
      return {
        dialogFormVisible: false,
        user: {
          role: 0,
          username: '',
          oldPassword: '',
          newPassword: '',
          newPasswordConfirm: ''
        },
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'}
          ],
          oldPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ],
          newPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ],
          newPasswordConfirm: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {validator: checkNewPassword, trigger: 'blur'},
            {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
          ]
        }

      }
    },
    computed: {},
    created: function () {
      let user = JSON.parse(sessionStorage.getItem('user'));
      if(user===null || user ===undefined){
          this.$router.push({path:'/login'})
      }
      this.user.role = user.role
      this.user.username = user.username
    },
    methods: {
      handleCommand(command) {
        if (command === 'loginout') {
          this.logout()
        } else if (command === 'updatePwd') {
          this.dialogFormVisible = true
        }

      },
      dialogClose(){
        this.$refs['user'].resetFields()
        this.user = {
          role: this.user.role,
          username: this.user.username,
          oldPassword: '',
          newPassword: '',
          newPasswordConfirm: ''
        }
        this.dialogFormVisible = false
      },
      submitForm(formName){
        const self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {
            self.$http.post('/api/user/updatePwd', {
              'password': self.user.oldPassword,
              'username': self.user.username,
              'newPassword': self.user.newPassword,
            })
              .then(function (response) {
                let responseData = response.data
                if (responseData.flag === common.respons.seccuss) {
                  self.$message({
                    message: '修改密码成功！',
                    type: 'success'
                  });
                  self.$router.push({path: '/login'})
                } else {
                  self.$message.error('修改密码失败 !' + responseData.message + '^_^;');
                }
              })
              .catch(function (error) {
                self.$message.error('登录系统异常，联系管理员处理！^_^;');
              });
          } else {
            return false;
          }
        });
      },
      logout(){
        const self = this;
        self.$http.get('/api/user/logout')
          .then(function (response) {
            let responseData = response.data
            if (responseData.flag === common.respons.seccuss) {
              localStorage.removeItem('user')
              self.$router.push({path: '/login'})
            } else {
              self.$message.error('修改密码失败 !' + responseData.message + '^_^;');
            }
          })
          .catch(function (error) {
            self.$message.error('登录系统异常，联系管理员处理！^_^;');
          });
      }
    }
  }
</script>
<style scoped>
  .header {
    width: 100%;
    font-size: 22px;
    text-align: right;
    background-color: #fff;
    border-bottom: 1px solid red;
  }

  .header .logo {
    float: left;
    width: 320px;
    text-align: center;
  }

  .logo .log-img {
    margin: 5px 10px 5px 50px;
    float: left;
    height: 50px;
  }

  .logo .system {
    float: left;
    font-family: 'Adobe 仿宋 Std R';
    font-weight: 400;
    text-align: center;
    padding: 23px 0 0 18px;
  }

  .user-info {
    float: right;
    padding-right: 50px;
    font-size: 16px;
  }

  .user-name {
    padding-top: 10px;
  }

  .user-info .el-dropdown-link {
    position: relative;
    display: inline-block;
    padding-left: 50px;
    cursor: pointer;
    vertical-align: middle;
  }

  .user-info .user-logo {
    position: absolute;
    left: 0;
    top: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .el-dropdown-menu__item {
    text-align: center;
  }
</style>
